<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/day_cars.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/customized.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				 <div class="mui-navbar">
				 </div>
				 <div class="mui-pages">
				 </div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="customiz_cars" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;" id="back">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">定制包车</h1>
				<button class="custom_sub" type="button">提交</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="days_lists_form">
							<form id="customForm" class="mui-input-group" >
							<input type="hidden" name="userid" value="${sessionScope.front_user.id}" />
								<div class="list_f_tit">
									 <span>
				 	  	  	 	     <img src="${ctxStatic }/wx/img/day_img/yongche_dingzhi@2x.png"/>
				 	  	  	    </span>
									<span>用车地点</span>
								 </div>
								 <div class="mui-input-row">
									<a href="#wap_lists">
										<span class="coustom_green"></span>
										<label style="color: #333;">上车地点</label>
										<input type="hidden" name="departcity.sitename" id="sitename">
										<input style="color: #333;" type="text" id="days_l_date" class="mui-input-clear" placeholder="请选择上车地点" name="sendAddress">
										<i class="mui-icon mui-icon-arrowright custo_ico"></i>
									</a>
								 </div>
								 <div class="mui-input-row">
										 <span class="coustom_orage"></span>
										<label style="color: #333;">目的城市</label>
										<input type="hidden" id="cityRecord"/>
						                <input type="hidden" id="spottypes"/>
		                                <input class="destCode" name="destcity.siteid" type="hidden" ${empty tRentproduct.departcity.siteid?'data-autocity="yes"':'' }>
		                                <input class="destName opt-city-choose citys" data-type="0,b" name="destcity.sitename" type="text" id="depart" value="" placeholder="请选择出发城市" readonly/>
										<i class="mui-icon mui-icon-arrowright custo_ico"></i>
								 </div>
								 <div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/xingche_dingzhi@2x.png"/>
				 	  	  	     </span>
									<span>行程备注</span>
								 </div>
								 <div class="mui-input-row" style="height: 100px;">
									<textarea style="height: 100px;" placeholder="请填写行程备注（选填）" name="modeldesc"></textarea>
								</div>
								<div class="list_f_tit">
									 <span>
				 	  	  	 	         <img src="${ctxStatic }/wx/img/day_img/chexing_dingzhi@2x.png"/>
				 	  	  	         </span>
									 <span>选择车型</span>
								 </div>
								 <div class="mui-input-row">
									<a href="#customize_lists">
										 <label style="color: #333;">选择车型</label>
										 <input type="text" id="custom_type_cars" class="mui-input-clear" placeholder="请选择车型">
										 <input type="hidden" id="cargotypeid" class="cargoid" name="cargotypeid">
										 <i class="mui-icon mui-icon-arrowright custo_ico"></i>
									</a>
								 </div>
								<div class="mui-input-row">
									<label>用车辆数</label>
									<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
										<input class="mui-input-numbox" type="number" name="vehiclenum" />
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								 </div>
								  <div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/shijian_dingzhi@2x.png"/>
				 	  	  	     </span>
									<span>用车时间</span>
								 </div>
								 <div class="mui-input-row">
									<label>出发时间</label>
									<input id="customtime" type="text" readonly="readonly"  placeholder="请选择出发时间"
										 name="fromdata" value="${defaultTime}">
								 </div>
								 <div class="mui-input-row">
									<label>包车天数</label>
									<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
										<input class="mui-input-numbox" type="number" name="rentdays" />
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								 </div>
								 <div class="list_f_tit">
									<span>
				 	  	  	 	          <img src="${ctxStatic }/wx/img/day_img/lianxiren_dingzhi@2x.png"/>
				 	  	  	            </span>
									<span>联系人信息</span>
								  </div>
								 <div class="mui-input-row">
									<label>联系人</label>
									<input type="text" class="mui-input-clear" placeholder="请填写联系人姓名" name="contactor" id="contacts">
								 </div>
								 <div class="mui-input-row">
									 <label>联系电话</label>
									 <input type="text" class="mui-input-clear" placeholder="请填写联系电话" name="contactphone" id="contactphone">
								 </div>
								 <div class="list_f_tit">
								 	<a href="#coutoms_md">
									 <span>
				 	  	  	 	         <img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png"/>
				 	  	  	         </span>
									 <span>预订须知</span>
									 <i class="mui-icon mui-icon-arrowright"></i>
									 </a>
								 </div>
							 </form>
						 </div>
					</div>
				</div>
			 </div>
		</div>
		<!--单页面结束-->
		<div id="wap_lists" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left ychback" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">上车地点</h1>
			</div>
			<div class="mui-page-content">
				 <div class="mui-scroll-wrapper">
					 <div class="mui-scroll">
						<div class="ych_city_box">
							<div class="mui-row ych_back_ico mui-input-row">
								<i class="mui-icon mui-icon-search wap_d_date_ico"></i>
								<input type="text" id="suggestId" class="mui-input-clear" size="20"  style="width:100%;" placeholder="请输入上车地点" />
							</div>
						</div>
						<div id="searchResultPanel" style="border:none;width:100%;height:auto; display:none;z-index: 22;"></div>
						<div id="l-map"></div>
					</div>
				 </div>
			 </div>
		</div>
		<script type="text/javascript">
			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}

			var map = new BMap.Map("l-map");
			map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。

			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});

			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if(e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

				value = "";
				if(e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br/>index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			if(data.status == 0 && data.result.length>0 ){
				var $sitename = data.result[0].address_components.city;
				$("#sitename").val($sitename);
			}
		});
			});
		</script>
		<div id="customize_lists" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择车型</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="customize_wrap">
						<c:forEach items="${cargotypeList }" var="index">
		                     <div class="customize_ii mui-action-back">
		                     	  <div class="mui-row">
		                     	  	  <div class="mui-col-xs-3 custom_img">
		                     	  	  	<img src="https://www.xiakeyueche.com${index.images}" style="width: 100%;" />
		                     	  	  </div>
		                     	  	  <div class="mui-col-xs-9" style="padding-left: 15px;">
										 <input type="hidden" value="${index.cargotypeid}" class="cargotypeid"/>
		                     	  	  	 <p class="custom_list_tit">${index.typename}</p>
		                     	  	  	 <p>
		                     	  	  		<span class="custom_pren">
		                     	  	  			<img src="${ctxStatic }/wx/img/day_img/renshu_xuanzecheixng@1x.png" />
		                     	  	  		</span>
		                     	  	  		<span>${index.seats}人</span>
		                     	  	  		<span class="custom_piece">
		                     	  	  			<img src="${ctxStatic }/wx/img/day_img/jianshu_xuanzechexing@1x.png" />
		                     	  	  		</span>
		                     	  	  		<span>${index.packs}件</span>
		                     	  	  	 </p>
		                     	  	  	 <p>${index.typedesc}</p>
		                     	  	  </div>
		                     	  </div>
		                     </div>
		                     </c:forEach>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--选择城市-->
		<div id="city" class="mui-page">
		<div class="city-bar mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			<h1 class="mui-center mui-title" style="color: #fff;">选择站点</h1>
		</div>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list listBox" >
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
	</div>
	<!--预订须知 -->
		<div id="coutoms_md" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">预定须知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="main">
						 <div class="margs">
        <div class="start">
            <p class="start-1">费用明细</p>

                <p>
                    费用包含：【一价全包】全程司机代驾服务费、车辆使用费、车辆油电费、 空驶费、夜间服务费、司机小费、路桥费、停车费、摆渡费。
                </p>

        </div>

<div>

    <p class="start-1">取消须知</p>
    <div class="mour">
      <p> ●该产品支持取消。</p>
      <p>●出行日期前24小时前取消，免收违约金；</p>
      <p>●出行日期前24小时至12小时取消，收取费用总额10%的违约金；</p>
      <p>●出行日期前12小时至2小时取消，收取费用总额30%的违约金；</p>
      <p>●出行开始前2小时取消，收取全额费用的违约金；</p>
      <p>●超过发车时间不可退款。</p>
      <p>●如需改期，请申请取消后重新预订。</p>   
    </div>
   </div>
           <p class="start-1">
                重要提示
            </p>
            <div class="mour">
             <p> 1、如您的预订时间距离发车时间在12小时以内，为保证您的顺利出行，请保持您的电话畅通。</p>
             <p> 2、如产生不含费用项请在服务结束后，将钱面付司机。严禁司机额外乱收费，如发现可联系霞客约车客服核实退还。</p>
             <p> 3、开具发票:如需发票，由霞客约车根据订单金额统一开具。请在服务完成后至我的账户—关于发票—立即开票填写开票信息，开票总金额为订单费用。</p>
             <p>4、接送站包车一口价产品不能临时改变路线。如您需要送达同城多个地址或在多个地址上车，司机会合理安排行驶路线。如您需要送达多个城市或在多个城市上车，请分开下单。</p>
            </div>
    

    </div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="${ctxStatic }/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.picker.min.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.dtpicker.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.indexedlist.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.poppicker.js" ></script>
	
			<script>
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#customiz_cars'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);

		var cityHtml = '';
		var destHtml = '';
		$(function(){
			$('#back').on('tap',function(){
				window.location.href="${ctxWx}/pu/index";
			})
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});	
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					$('#cityRecord').val('dest');
				}
				$('#spottypes').val($(this).attr('data-type'));
				viewApi.go('#city');
			});
			//表单提交
			$('.custom_sub').on('tap',function(){
				var msg= '';
				var r = /^1[3|4|5|7|8]\d{9}$/;
				var x = $('#sitename').val();//出发地
				var y = $('#depart').val();//出发地
				var p = $('#cargotypeid').val();//出发地
				var w = $('#contacts').val();//出发地
				var z = $('#contactphone').val();//出发地
				var t = $('#customtime').val();//出发地
				if(x == ''){
					msg = '请填写上车地点';
				} else if(y==''){
					msg = '请填写目的地';
				}else if(p==''){
					msg = '请选择车型';
				}else if(z==''){
					msg = '请填写手机号';
				}else if(!r.test(z)){
					msg = '手机号格式不正确';
				}else if(w==''){
					msg = '请填写联系人';
				}else if(t==''){
					msg = '请填写出发时间';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				}else{
					mui.post('${ctxWx}/pu/checkTime',{time:t},function(d){
						if(d==1){
							mui.alert(msg, '距离发车时间不足2小时，请重新选择发车时间');
							return;
						}else if(d==2){
							mui.alert(msg, '暂只支持三个月之内产品预定');
							return;
						}else{
							mui.post('${ctxFront}/mobile/saveDemand',$('#customForm').serialize(),function(d){
								if(d.code=='200'){
									//跳转定制需求
									mui.alert(d.message,function(){
										window.location.href = "${ctxWx}/my/myInfoPage";
									})
								}else{
									mui.alert(d.message);
								}
							}, 'json');
						}
					});
				}
			});
		});
		
		// 提交查询表单
		function subForm() {
			var msg= '';
			var boardaddrName = $('input[name="departcity.sitename"]').val();
			var offaddrName = $('input[name="destcity.sitename"]').val();
			if(boardaddrName == ''){
				msg = '请填写出发地';
			} else if(offaddrName == ''){
				msg = '请填写目的地';
			}
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#customForm').submit();
			}
		}
		// 获取站点数据
		function getSiteData() {
			var spottypes = $('#spottypes').val();
			var loaded = false; // 已加载
			var html = '';		
			if(spottypes == '0,b' && cityHtml != '') {
				loaded = true;
				html = cityHtml;
			}
			if(spottypes == '0,2,b' && destHtml != '') {
				loaded = true;
				html = destHtml;
			}
			if(!loaded){			
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							html += site.sitename;
							html += '</li>';
						}
					}
					if(spottypes == '0,b') {
						cityHtml = html;
					}
					if(spottypes == '0,2,b') {
						destHtml = html;
					}
					$('#indexListContent').html(html);
					// 初始化站点数据
					$('#cityStyle').remove();
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(html);
				// 初始化站点数据
				$('#cityStyle').remove();
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'dest') {
				$('.destCode').val(item.attr('data-value'));
				$('.destName').val(item.attr('data-name'));
			} else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#customiz_cars');
		}
			Zepto(function(){
			//传值
			$('.ychback').on('tap', function() {
				var oInput1 = $('#suggestId').val();
				$('#days_l_date').val(oInput1);
			})
			//定制包车传值
			$('.customize_ii').on('tap',function(){
			    var typecars=$(this).find('.custom_list_tit').text();
			    var cargotypeid=$(this).find('.cargotypeid').val();
			    $('#custom_type_cars').val(typecars).css('color','#333');
			    $('#cargotypeid').val(cargotypeid);
			})
			//选择时间
				var start_time_picker = new mui.DtPicker({});
				$('#customtime').on('tap',function(){
					setTimeout(function(){
					 start_time_picker.show(function(items){
						$("#customtime").val(items.text);
			});
		},200);
			})
		})
		
	</script>
</html>